<template>
  <!-- 利用 el-table 模拟微博动态展示，保留原有数据请求逻辑 -->
  <el-table :data="tableData" stripe style="width: 100%" border>
    <!-- 自定义一列，用来渲染类似微博动态的内容 -->
    <el-table-column label="微博动态" align="center">
      <template #default="scope">
        <div class="weibo-card">
          <!-- 头像及发布者信息区域 -->
          <div class="weibo-card__header">
            <!-- 这里假设数据里有头像字段 avatar，可根据实际接口返回调整 -->
            <img :src="'/img'+user.tx" alt="avatar" class="weibo-card__avatar" />
            <div class="weibo-card__info">
              <!-- 发布者名称，对应原 userId 字段，可根据实际改 -->
              <span class="weibo-card__nickname">{{ user.nc }}</span>
              <span class="weibo-card__meta">
                <!-- 发布时间，对应原 time 字段 -->
                {{ scope.row.time }}
                <!-- 发布来源，可根据实际接口返回决定是否显示及字段 -->
                来自 微博网页版
              </span>
              <div class="weibo-card__meta">
                标题# {{ scope.row.title }}
              </div>
            </div>
          </div>
          <!-- 动态内容区域，对应原 text 字段 -->
          <div class="weibo-card__content">
            {{ scope.row.text }}
            <!-- 假设数据里有图片字段 images，可循环展示图片，这里简单模拟单图 -->
<!--            <div class="weibo-card__image" >-->
<!--              <img :src="'http://localhost:8080/boke/myboke/'+scope.row.url" alt="weibo-img" />-->
<!--            </div>-->
            <div class="weibo-card__image" v-if="scope.row.url && scope.row.url.trim()">
              <img
                  v-for="(imgUrl, index) in scope.row.url.split(',')"
                  :key="index"
                  :src="'/img'+imgUrl.trim()"
                  alt="weibo-img"
                  class="imgs"
              />
            </div>
          </div>
          <!-- 互动按钮区域 -->
          <div class="weibo-card__actions">
            <span class="weibo-card__action">
              <el-icon><ChatDotRound /></el-icon>
              <!-- 假设接口返回评论数字段 commentCount，没有可自行模拟或隐藏 -->
              {{ scope.row.commentCount || 0 }}
            </span>
            <span class="weibo-card__action">
              <el-icon><StarFilled /></el-icon>
              <!-- 假设接口返回点赞数字段 likeCount，没有可自行模拟或隐藏 -->
              {{ scope.row.likeCount || 0 }}
            </span>
            <span class="weibo-card__action">
              <el-icon><Share /></el-icon>
              <!-- 假设接口返回转发数字段 forwardCount，没有可自行模拟或隐藏 -->
              {{ scope.row.forwardCount || 0 }}
            </span>
          </div>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import axios from 'axios';
import {ref, onMounted, defineExpose} from 'vue';
// 引入 Element Plus 图标，按需添加
import { ChatDotRound, StarFilled, Share } from '@element-plus/icons-vue';
const userId=ref(1);
const user = ref({
  id: '',
  nc: '',
  drb: '',
  url: '',
  tx: '',
});
const post = ref({
  id: '',
  userId: '',
  time: '',
  text: '',
  url: '',
  // 可扩展其他字段，如头像、评论数等
  avatar: '/src/assets/', // 默认头像示例
  commentCount: 0,
  likeCount: 0,
  forwardCount: 0,
});
const tableData = ref([]);
const handleUpdateData=async (obj) => {
  user.value=obj;
  post.value.userId=user.value.id;
  await doPostList();
};
const doPostList = async () => {
  const { data } = await axios.get('/api/post', {
    params: post.value,
  });
  tableData.value = data;
};
defineExpose(
    {
      handleUpdateData,
    }
);
</script>

<style scoped>
.weibo-card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.weibo-card__header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.weibo-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 8px;
}
.weibo-card__info {
  display: flex;
  flex-direction: column;
}
.weibo-card__nickname {
  font-weight: bold;
  color: #333;
}
.weibo-card__meta {
  font-size: 12px;
  color: #999;
}
.weibo-card__content {
  margin: 8px 0;
  color: #333;
  line-height: 1.6;
}
.weibo-card__image {
  margin-top: 8px;
}
.weibo-card__image img {
  max-width: 200px;
  border-radius: 4px;
}
.weibo-card__actions {
  display: flex;
  gap: 24px;
  color: #666;
  margin-top: 8px;
  cursor: pointer;
}
.weibo-card__action {
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}
.weibo-card__action:hover {
  color: #409eff;
}
.imgs{
  width: 133px;
  height: 133px;
  margin:0 2px;
}
</style>